<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="200px">
        <div class="crm">crm客户管理</div>
        <el-menu
            active-text-color="#ffd04b"
            background-color="#545c64"
            class="el-menu-vertical-demo"
            :default-active="activeRouter"
            style="border-right: solid 0px"
            text-color="#fff"
            :router = "true"
            @open="handleOpen"
            @close="handleClose"
        >
          <el-sub-menu index="1">
            <template #title>
              <span>市场活动</span>
            </template>
              <el-menu-item index="/hello/marketActivity">市场活动</el-menu-item>
              <el-menu-item index="1-2">市场xxx</el-menu-item>
              <el-menu-item index="1-3">item three</el-menu-item>
          </el-sub-menu>
        </el-menu>
        <el-menu
            active-text-color="#ffd04b"
            background-color="#545c64"
            class="el-menu-vertical-demo"
            text-color="#fff"
            style="border-right: solid 0px"
            :router = "true"
            @open="handleOpen"
            @close="handleClose"
        >
          <el-sub-menu index="2">
            <template #title>
              <span>线索管理</span>
            </template>
            <el-menu-item index="/hello/clueControl">线索管理</el-menu-item>
            <el-menu-item index="2-2">item two</el-menu-item>
            <el-menu-item index="2-3">item three</el-menu-item>
          </el-sub-menu>
        </el-menu>
        <el-menu
            active-text-color="#ffd04b"
            background-color="#545c64"
            class="el-menu-vertical-demo"
            style="border-right: solid 0px"
            text-color="#fff"
            :router = "true"
            @open="handleOpen"
            @close="handleClose"
        >
          <el-sub-menu index="3">
            <template #title>
              <span>客户管理</span>
            </template>
            <el-menu-item index="/hello/customer">客户列表</el-menu-item>
            <el-menu-item index="3-2">item two</el-menu-item>
            <el-menu-item index="3-3">item three</el-menu-item>
          </el-sub-menu>
        </el-menu>
        <el-menu
            active-text-color="#ffd04b"
            background-color="#545c64"
            class="el-menu-vertical-demo"
            style="border-right: solid 0px"
            :router = "true"
            text-color="#fff"
            @open="handleOpen"
            @close="handleClose"
        >
          <el-sub-menu index="4">
            <template #title>
              <span>交易管理</span>
            </template>
            <el-menu-item index="/hello/tran">交易管理</el-menu-item>
            <el-menu-item index="4-2">item two</el-menu-item>
            <el-menu-item index="4-3">item three</el-menu-item>
          </el-sub-menu>
        </el-menu>
        <el-menu
            active-text-color="#ffd04b"
            background-color="#545c64"
            class="el-menu-vertical-demo"
            style="border-right: solid 0px"
            text-color="#fff"
            @open="handleOpen"
            @close="handleClose"
        >
          <el-sub-menu index="5">
            <template #title>
              <span>产品管理</span>
            </template>
            <el-menu-item index="5-1">item one</el-menu-item>
            <el-menu-item index="5-2">item two</el-menu-item>
            <el-menu-item index="5-3">item three</el-menu-item>
          </el-sub-menu>
        </el-menu>
        <el-menu
            active-text-color="#ffd04b"
            background-color="#545c64"
            class="el-menu-vertical-demo"
            style="border-right: solid 0px"
            text-color="#fff"
            @open="handleOpen"
            @close="handleClose"
        >
          <el-sub-menu index="6">
            <template #title>
              <span>字典管理</span>
            </template>
            <el-menu-item index="6-1">item one</el-menu-item>
            <el-menu-item index="6-2">item two</el-menu-item>
            <el-menu-item index="6-3">item three</el-menu-item>
          </el-sub-menu>
        </el-menu>
        <el-menu
            active-text-color="#ffd04b"
            background-color="#545c64"
            class="el-menu-vertical-demo"
            text-color="#fff"
            style="border-right: solid 0px"
            :router = "true"
            @open="handleOpen"
            @close="handleClose"
        >
          <el-sub-menu index="7">
            <template #title>
              <span>用户管理</span>
            </template>
            <el-menu-item index="/hello/user">用户管理</el-menu-item>
            <el-menu-item index="7-2">item two</el-menu-item>
            <el-menu-item index="7-3">item three</el-menu-item>
          </el-sub-menu>
        </el-menu>
        <el-menu
            active-text-color="#ffd04b"
            background-color="#545c64"
            class="el-menu-vertical-demo"
            text-color="#fff"
            style="border-right: solid 0px"
            @open="handleOpen"
            @close="handleClose"
        >
          <el-sub-menu index="8">
            <template #title>
              <span style="text-align: center">系统管理</span>
            </template>
            <el-menu-item index="8-1">item one</el-menu-item>
            <el-menu-item index="8-2">item two</el-menu-item>
            <el-menu-item index="8-3">item three</el-menu-item>
          </el-sub-menu>
        </el-menu>
      </el-aside>

      <el-container class="contentContainer">
        <el-header >头部信息

          <el-dropdown @command="handleCommand">
            <span >
              {{user.name}}<el-icon class="el-icon--right"><arrow-down /></el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="a">我的资料</el-dropdown-item>
                <el-dropdown-item command="b">修改密码</el-dropdown-item>
                <el-dropdown-item command="c" divided @click="logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </el-header>
        <el-main>
<!--基于路由的局部刷新-->
          <router-view v-if="isRouterView"/>
        </el-main>
        <el-footer>底部==============================================</el-footer>
      </el-container>
    </el-container>
  </div>
</template>
<script >
import {doGet} from "@/http/httpRequest";
import {clearToken, messageTip} from "@/util/utils";

export default {
  name : "DashBoardView",
  data(){
    return{
      user:{},
      isRouterView :true,
      activeRouter:'',
    }
  },
  //路由刷新
  provide(){
    return{
      reload:()=>{
        this.isRouterView = false;
        this.$nextTick(function(){
          this.isRouterView = true;
        });
      }
    }
  },
  methods:{
    logout() {
      doGet("/logout",{}).then(res =>{
        if (res.data.code === 200) {
          //退出成功
          clearToken();
          window.location.href = "/";
          messageTip("退出成功","success")
        }
      })
    },
    getUser() {
      doGet("/api/userInfo",{}).then(res =>{
        this.user = res.data.data
      })
    },
    active() {
      //获取当前访问的路由路径
      let currentPath = this.$route.path;
      // 多级菜单获取路由路径
      let currentPathArr = currentPath.split('/');
      this.activeRouter = "/" + currentPathArr[1] + "/" + currentPathArr[2]
    },
  },
  mounted() {
    this.getUser();
    //展开当前路由对应菜单
    this.active();
  }
}
</script>
<!---->
<style >
.el-aside{

  background: #1D3043;
}
.el-header{
  background: #213D5B;
  height: 38px;
  line-height: 38px;
}
.el-main{
  background: #fdfdfd;
}
.el-footer{
  background: #213D5B;
  height: 38px;
  line-height: 38px;
  text-align: center;
}
.contentContainer{
  height: calc(98vh);
}
.crm{
  color: white;
  height: 38px;
  text-align: center;
  line-height: 38px;
}
.el-dropdown{
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  float: right;
  align-items: center;
  line-height: 38px;
}
</style>